<template>
  <div>
    <!-- 标题 -->
    <head-main :headimg="headimg" :btname="btname" :btrouter="btrouter" />
    <!-- 背景 -->
    <img src="@/images/csbg.png" class="login_over" />
    <!-- 任务栏task -->
    <div class="taskbox">
      <div
        class="task"
        v-for="item in task"
        :key="item.id"
        @click="step = item.id"
      >
        <img src="@/images/taskbg.png" alt="" />
        <span class="taskspan">{{ item.name }}</span>
        <img
          src="@/images/taskjx.png"
          alt=""
          class="taskzt"
          v-show="item.id == step"
        />
        <img
          src="@/images/taskover.png"
          alt=""
          class="taskzt"
          v-show="step > item.id"
        />
      </div>
    </div>
    <!-- 物品栏 -->
    <div v-show="step >= 2 && step != 6" class="wplbox">
      <img src="@/images/wpl.png" alt="" srcset="" />
      <div class="wpbox">
        <div
          class="wp"
          v-for="item in wp"
          :key="item.id"
          @click="xzwpfn(item.id)"
        >
          <img src="@/images/wpq.png" alt="" srcset="" class="wpimgs" />
          this
          <div class="wpgl" v-if="item.id == steps || item.id == stepss"></div>
          <img
            :src="item.src"
            alt=""
            :class="item.id <= 4 ? 'wpimg' : 'wpimgsd'"
          />
          <span class="wpdes">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- 虚拟操作 -->
    <Seen
      :image="image"
      :images="images"
      @ertipsfn="ertipsfn"
      @tctipsfn="tctipsfn"
      @imagefn="imagefn"
      @imagesfn="imagesfn"
      @xybshowfn="xybshowfn"
      @cxshowfn="cxshowfn"
    />
    <!-- 物品展示 -->
    <div class="wpzsxn" v-show="step == 1">
      <img src="@/images/wpzsxn.png" alt="" />
      <div class="tool yzboxqd" @click="yzqr()">
        <img src="@/images/qd.png" alt="" class="active" />
        <img src="@/images/qdac.png" alt="" class="normal" />
      </div>
    </div>
    <!-- 提示 -->
    <div class="tsbox" v-if="ertips">
      <img src="@/images/tslogo.png" alt="" class="tsboximg" />
      <span> {{ ertips }} </span>
    </div>
    <!-- 弹窗提示框 -->
    <div class="tcbox" v-if="tctips">
      {{ tctips }}
      <div class="tool yzboxqd" @click="yzqr()">
        <img src="@/images/qd.png" alt="" class="active" />
        <img src="@/images/qdac.png" alt="" class="normal" />
      </div>
    </div>
    <div class="tcbox" v-if="cxshow">
      <img src="@/images/cxzp.png" alt="" />
    </div>
    <!-- 下一步 -->
    <div class="tool xybbox" @click="xybfn" v-show="xybshow">
      <img src="@/images/xyb.png" alt="" srcset="" class="active" />
      <img src="@/images/xybac.png" alt="" srcset="" class="normal" />
    </div>
    <!-- 居中图片展示 -->
    <div v-show="imagesrc" class="tcbox">
      <img :src="imagesrc" alt="" />
    </div>
    <!-- 记录和处理 -->
    <div class="jlxtszbox" v-show="step == 6 && steps != 6.1">
      <img src="@/images/jlxtszbj.png" alt="" srcset="" />
      <div class="jxbox">
        <img src="@/images/jlxtsz.png" alt="" />
        <span>记录血糖数值</span>
      </div>
      <div class="tool yzboxqd" @click="steps = 6.1">
        <img src="@/images/qd.png" alt="" class="active" />
        <img src="@/images/qdac.png" alt="" class="normal" />
      </div>
    </div>
    <div class="jlclbox" v-show="steps == 6.1">
      <img src="@/images/clbj.png" alt="" />
      <div class="clbj">
        <div class="wpzsbox">
          <div v-for="item in gnimg" :key="item.id" @click="ljcl(item)">
            <img :src="item.src" alt="" />
          </div>
        </div>
        <div class="ljtbox">
          <div
            v-for="item in ljt"
            :key="item.id"
            @click="ljcpd(item.id)"
            class="ljtt"
          >
            <img :src="item.src" alt="" />
            <div class="shbox">
              <div
                v-for="items in shljdata"
                v-show="item.id == 1"
                :key="items.id"
                class="yll"
              >
                <img :src="items.src" alt="" />
              </div>
            </div>
            <div class="ylbox">
              <div
                v-for="items in ylljdata"
                v-show="item.id == 2"
                :key="items.id"
                class="yll"
              >
                <img :src="items.src" alt="" />
              </div>
            </div>
            <div class="ylbox">
              <div
                v-for="items in rqljdata"
                v-show="item.id == 3"
                :key="items.id"
                class="yll"
              >
                <img :src="items.src" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 正确还是错误 -->
      <div class="zcsw">
        <span v-show="right">回答正确</span>
        <span v-show="errow">回答错误，已显示正确答案</span>
      </div>
      <div class="tool yzboxqd" @click="yzda()" v-if="yzshow">
        <img src="@/images/qd.png" alt="" class="active" />
        <img src="@/images/qdac.png" alt="" class="normal" />
      </div>
      <div class="tool yzboxqd" @click="wcfn()" v-if="!yzshow">
        <img src="@/images/wc.png" alt="" class="active" />
        <img src="@/images/wcac.png" alt="" class="normal" />
      </div>
    </div>
  </div>
</template>
<script>
import Seen from '@/view/seen.vue'
import headMain from './headMain.vue'
export default {
  components: { headMain, Seen },
  name: 'WorkspaceJsonZsCb',
  data() {
    return {
      yzshow: true,
      errow: false,
      right: false,
      zcljt: [],
      imagesrc: '',
      cxshow: false,
      xybshow: false,
      ertips: '',
      tctips: '',
      image: [],
      images: [],
      btname: '虚拟操作',
      btrouter: 'mK5',
      headimg: require('@/images/mk5bg.png'),
      step: 1, //大步骤
      steps: 0,
      stepss: 0,
      task: [
        {
          id: 1,
          name: '准备'
        },
        {
          id: 2,
          name: '准备采血笔'
        },
        {
          id: 3,
          name: '插入试纸'
        },
        {
          id: 4,
          name: '采血'
        },
        {
          id: 5,
          name: '吸血'
        },
        {
          id: 6,
          name: '记录与处理'
        }
      ],
      wp: [
        { id: 1, name: '血糖仪', src: require('@/images/xty.png') },
        { id: 2, name: '一次性使用采血试纸', src: require('@/images/cxz.png') },
        { id: 3, name: '采血笔', src: require('@/images/cxb.png') },
        {
          id: 4,
          name: '一次性使用采血针',
          src: require('@/images/cxzn.png')
        },
        { id: 5, name: '棉签', src: require('@/images/mq.png') },
        { id: 6, name: '酒精棉签', src: require('@/images/mq.png') }
      ],
      gnimg: [
        {
          id: 1,
          src: require('@/images/gsz.png')
        },
        {
          id: 2,
          src: require('@/images/gcxz.png')
        },
        {
          id: 3,
          src: require('@/images/mq3.png')
        }
      ],
      ljt: [
        {
          id: 1,
          src: require('@/images/sh1.png')
        },
        {
          id: 2,
          src: require('@/images/yl2.png')
        },
        {
          id: 3,
          src: require('@/images/rq3.png')
        }
      ],
      shljdata: [],
      ylljdata: [],
      rqljdata: [],
      yllzq: [
        {
          id: 1,
          src: require('@/images/gsz.png')
        },

        {
          id: 2,
          src: require('@/images/mq3.png')
        }
      ],
      rqljzq: [
        {
          id: 1,
          src: require('@/images/gcxz.png')
        }
      ],
      flag1: '',
      flag2: '',
      i: 1,
      flag3: ''
    }
  },

  mounted() {},
  watch: {
    step: {
      handler(item, olditem) {
        this.yzshow = true
        this.flag3 = ''
        this.i = 1
        this.shljdata = []
        this.ylljdata = []
        this.rqljdata = []
        this.zcljt = []
        this.image = []
        this.images = []
        this.steps = 0
        this.stepss = 0
        this.tctips = ''
        this.ertips = ''
        this.xybshow = false
        this.errow = false
        this.right = false
        this.imagesrc = ''
        console.log(item, olditem)
        this.steps = item
        if (item == 2) {
          this.image = [
            {
              src: require('@/images/dcxb.png'),
              x: 370,
              y: 250,
              width: 249,
              height: 587
            }
          ]
          this.images = [
            {
              src: require('@/images/dcxz.png'),
              x: 1000,
              y: 210,
              width: 249,
              height: 587
            }
          ]
          this.steps = 4
          this.ertips = '请点击物品栏中的一次性采血针,安装采血针到采血笔'
        }
        if (item == 3) {
          this.steps = 2
          this.ertips = '请点击物品栏中一次性采血试纸,将试纸插入血糖仪中'
          this.image = [
            {
              src: require('@/images/dxtyw.png'),
              x: 370,
              y: 250,
              width: 249,
              height: 587
            }
          ]
          this.images = [
            {
              src: require('@/images/dcxsz.png'),
              x: 1000,
              y: 210,
              width: 171,
              height: 499
            }
          ]
        }
        if (item == 4) {
          this.steps = 0
          this.stepss = 0
          //
          this.tctips =
            '采血的手指通常是是食指、中指、无名指这三个手指，为减轻疼痛，可取手指两侧采血，采血前由掌心向指尖推揉数次，或指尖下垂数分钟后采血，确保指尖血量充足。'
        }
        if (item == 5) {
          // this.steps = 1
          // this.stepss = 5
          this.ertips = '请点击物品栏中的棉签至采血手指拭去第一滴血'
          this.steps = 5
          this.image = [
            {
              src: require('@/images/scxd.png'),
              x: 370,
              y: 250,
              width: 249,
              height: 587
            }
          ]
          this.images = [
            {
              src: require('@/images/dmq.png'),
              x: 1000,
              y: 210,
              width: 249,
              height: 587
            }
          ]
        }
      }
    },
    steps: {
      handler(item, olditem) {
        console.log(item, olditem)
      }
    }
  },
  methods: {
    xzwpfn(id) {
      if (id == this.steps || id == this.stepss) {
        this.steps = 0
        if (id == 4) {
          this.ertips = ''
          this.tctips = '采血针已安装完成'
        }
        if (id == 2) {
          this.ertips = ''
          this.xybshow = true
          this.images = []
          this.image = []
          this.imagesrc = require('@/images/dxty.png')
        }
        if (id == 6) {
          this.tctips = '消毒采血部位共两次，待酒精自然晾干方可采血'
        }
        if (id == 3) {
          this.steps = 0
          this.stepss = 0
          this.ertips = ''
          this.cxshow = true
          this.xybshow = true
        }
        if (id == 5) {
          this.tctips = '沿着图示方向擦一次'
        }
        if (id == 1) {
          this.image = []
          this.images = []
          this.imagesrc = require('@/images/xtxx.png')
          this.xybshow = true
          this.ertips = ''
        }
      }
    },
    ertipsfn(i) {
      this.ertips = i
      console.log('提示更新了')
    },
    tctipsfn(i) {
      this.tctips = i
    },
    yzqr() {
      if (this.tctips == '采血针已安装完成') {
        this.step = 3
      }
      if (
        this.tctips ==
        '采血的手指通常是是食指、中指、无名指这三个手指，为减轻疼痛，可取手指两侧采血，采血前由掌心向指尖推揉数次，或指尖下垂数分钟后采血，确保指尖血量充足。'
      ) {
        this.ertips = '请点击物品栏中的酒精棉签消毒中指'
        this.steps = 6
        this.tctips = ''
        this.image = [
          {
            src: require('@/images/dxdfx.png'),
            x: 600,
            y: 250,
            width: 249,
            height: 587
          }
        ]
        this.images = [
          {
            src: require('@/images/dmq.png'),
            x: 1000,
            y: 210,
            width: 460,
            height: 184
          }
        ]
      }
      if (this.tctips == '消毒采血部位共两次，待酒精自然晾干方可采血') {
        this.ertips = '请点击物品栏中的采血笔至中指食指处进行采血'
        this.stepss = 3
        this.tctips = ''
        this.image = [
          {
            src: require('@/images/ks.png'),
            x: 600,
            y: 250,
            width: 249,
            height: 587
          }
        ]
        this.images = [
          {
            src: require('@/images/dcxb.png'),
            x: 1000,
            y: 210,
            width: 249,
            height: 587
          }
        ]
      }
      if (this.step == 1) {
        this.step = 2
      }
      if (this.tctips == '沿着图示方向擦一次') {
        this.ertips = '点击物品栏血糖仪,使血糖仪至中指食指处，点击下一步'
        this.tctips = ''
        this.steps = 1
        this.images = []
        this.image = [
          {
            src: require('@/images/dxty.png'),
            x: 370,
            y: 250,
            width: 249,
            height: 587
          }
        ]
      }
    },
    imagesfn(i) {
      this.images = i
    },
    imagefn(i) {
      this.image = i
    },
    xybfn() {
      if (this.imagesrc == require('@/images/dxty.png')) {
        this.step = 4
        this.imagesrc = ''
      }

      if (this.images[0]) {
        if (this.images[0].src == require('@/images/dcxb.png')) {
          this.step = 5
          this.cxshow = false
        }
      }
      if (this.imagesrc == require('@/images/xtxx.png')) {
        this.step = 6
        this.imagesrc = ''
      }
    },
    xybshowfn(i) {
      this.xybshow = i
    },
    cxshowfn() {
      this.cxshow = true
    },
    ljcl(item) {
      if (this.zcljt != []) {
        this.zcljt = []
        this.zcljt.push(item)
        console.log('更新暂存', this.zcljt)
      } else {
        this.zcljt.push(item)
        console.log('更新暂存', this.zcljt)
      }
    },
    ljcpd(id) {
      if (id == 1) {
        if (this.shljdata.length != 0) {
          const flag = this.shljdata.some((item) => {
            return item.id == this.zcljt[0].id
          })

          if (!flag) {
            this.shljdata.push(this.zcljt[0])
            this.zcljt = []
          }
        } else {
          this.shljdata.push(this.zcljt[0])
          this.zcljt = []
        }
      } else if (id == 2) {
        this.zcljt.forEach((item) => {
          if (item.id == 1 || item.id == 2) {
            // this.ylljdata.push(this.zcljt[0])
            // this.zcljt = []
            // console.log('回答正确', this.ylljdata)

            if (this.ylljdata.length != 0) {
              const flag = this.ylljdata.some((item) => {
                return item.id == this.zcljt[0].id
              })

              if (!flag) {
                this.ylljdata.push(this.zcljt[0])
                this.zcljt = []
              }
            } else {
              this.ylljdata.push(this.zcljt[0])
              this.zcljt = []
            }
            return
          } else {
            if (this.ylljdata.length != 0) {
              const flag = this.ylljdata.some((item) => {
                return item.id == this.zcljt[0].id
              })

              if (!flag) {
                this.ylljdata.push(this.zcljt[0])
                this.zcljt = []
              }
            } else {
              this.ylljdata.push(this.zcljt[0])
              this.zcljt = []
            }
            return
          }
        })
      } else if (id == 3) {
        this.zcljt.forEach((item) => {
          if (item.id != 3) {
            if (this.rqljdata.length != 0) {
              const flag = this.rqljdata.some((item) => {
                return item.id == this.zcljt[0].id
              })

              if (!flag) {
                this.rqljdata.push(this.zcljt[0])
                this.zcljt = []
              }
            } else {
              this.rqljdata.push(this.zcljt[0])
              this.zcljt = []
            }

            return
          } else {
            if (this.rqljdata.length != 0) {
              const flag = this.rqljdata.some((item) => {
                return item.id == this.zcljt[0].id
              })

              if (!flag) {
                this.rqljdata.push(this.zcljt[0])
                this.zcljt = []
              }
            } else {
              this.rqljdata.push(this.zcljt[0])
              this.zcljt = []
            }
            // console.log('回答正确')
          }
        })
      }
    },
    yzda() {
      this.yzshow = false
      if (this.shljdata.length != 0) {
        this.errow = true
        this.right = false
        this.zqzs()
      } else if (this.rqljdata.length == 1 && this.ylljdata.length == 2) {
        this.rqljdata.forEach((item) => {
          const flag = this.rqljzq.some((items) => {
            return item.src != items.src
          })
          console.log(flag)
          this.flag1 = flag
        })
        try {
          this.ylljdata.forEach((item) => {
            const flag = this.yllzq.some((items) => {
              return item.src == items.src
            })
            this.flag3 = flag
            console.log(flag)
            if (flag == false) {
              this.flag2 = flag
              console.log('满足不存在的答案回答错误', flag)
              throw new Error('StopIteration') // 抛出异常来提前结束循环
            } else {
              this.i = this.i + 1
              if (this.i == 2) {
                this.flag2 = this.flag3
                console.log('满足不存在的答案回答错误', flag)
              }
            }
          })
        } catch (error) {
          if (error.message !== 'StopIteration') {
            throw error // 如果不是我们抛出的异常，就把异常继续抛出
          }
        }
        if (this.flag1 == false && this.flag2 == true) {
          console.log(this.flag1, this.flag2)
          this.errow = false
          this.right = true
        } else {
          console.log(this.flag1, this.flag2)
          this.errow = true
          this.right = false
          this.zqzs()
        }
      } else {
        this.errow = true
        this.right = false
        this.zqzs()
      }
    },
    zqzs() {
      this.shljdata = []
      this.ylljdata = [
        {
          id: 1,
          src: require('@/images/gsz.png')
        },

        {
          id: 2,
          src: require('@/images/mq3.png')
        }
      ]
      this.rqljdata = [
        {
          id: 1,
          src: require('@/images/gcxz.png')
        }
      ]
    },
    wcfn() {
      // 跳转到首页
      this.$router.push({
        name: 'mK5'
      })
    }
  }
}
</script>

<style></style>
